<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>八里沟云生态平台</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/lodash.min.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/soda.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
<!--    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=TVSGfMDUGFUd7wsab5OdUYOYqg4aYzFf"></script>-->
    <style>
        .weather .jishu {
            font-size: 14px;
            line-height: 28px;
            float: right;
            margin: 7px 10px;
            opacity: 0.5;
        }
    </style>
</head>

<body>
<div class="pagemain page1">
    <div class="center-main">
        <div class="leftcon">
            <!--天气-->
            <div class="weather">
                <p class="jishu">技术支持：河南省气象服务中心</p>
                <div class="con">
                    <div class="t1">
                        <span class="week-span">周四</span> <span class="date-span">11月10日</span>
                        <span>（实时：<span class="realTime">20</span>℃）</span></div>
                    <div class="t2">
                        <div class="temp">6-18℃</div>
                        <div class="wea">
                            <p class="cond">多1云</p>
                            <p></p>
                        </div>
                    </div>
                    <div class="wico"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                    <div class="wlist">
                        <ul>
                            <li>
                                <div class="name"><span>星期日</span><b>12</b>℃</div>
                                <div class="img"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                            </li>
                            <li>
                                <div class="name"><span>星期日</span><b>12</b>℃</div>
                                <div class="img"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                            </li>
                            <li>
                                <div class="name"><span>星期日</span><b>12</b>℃</div>
                                <div class="img"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                            </li>
                            <li>
                                <div class="name"><span>星期日</span><b>12</b>℃</div>
                                <div class="img"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                            </li>
                            <li>
                                <div class="name"><span>星期日</span><b>12</b>℃</div>
                                <div class="img"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                            </li>
                            <li>
                                <div class="name"><span>星期日</span><b>12</b>℃</div>
                                <div class="img"><img src="https://cdn.heweather.com/cond_icon/100.png" class="w100" alt=""></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--天气 end -->
            <!--近7天客流量-->
            <div class="volume">
                <div class="top">
                    近一周的接待总人数：<span id="sevenTotal">132546&nbsp;人</span>
                </div>
                <div class="chartcon" id="passDiv">
                
                </div>
            </div>
            <!--近7天客流量 end-->
            <!--语音画册-->
            <div class="voice">
                <div class="top">
                    <div class="row">
                        <div class="text">累计收听:</div>
                        <div class="text ci">次</div>
                    </div>
                    <div class="row">
                        <div class="text">累计收听:</div>
                        <div class="num" id="vo1">0</div>
                        <div class="text">时</div>
                        <div class="num" id="vo2">0</div>
                        <div class="text">分</div>
                        <div class="num" id="vo3">0</div>
                        <div class="text">秒</div>
                    </div>
                </div>
                <div class="rank">
                    <div class="box fl">
                        <script type="text/html" id="vTop">
                            <li soda-repeat="item in list">
                                <div class="ico">{{$index+1}}</div>
                                <div class="text">{{item.name}}</div>
                            </li>
                        </script>
                        <script type="text/html" id="vTop2">
                            <li soda-repeat="item in list">
                                <div class="ico">{{$index+6}}</div>
                                <div class="text">{{item.name}}</div>
                            </li>
                        </script>
                        <ul id="vBox1">
                        </ul>
                    </div>
                    <div class="box fr">
                        <ul id="vBox2">
                        </ul>
                    </div>
                </div>
            </div>
            <!--语音画册 end-->
        </div>
        <div class="centercon">
            <div class="online">
                <div class="text">实时在园人数</div>
                <div class="num">
                    <div class="am_num">
                        <div id="total">
                                <span class="dn"><i style="background-position: 0px 0px; "></i>
                                    <i style="background-position: 0px 0px;"></i></span>
                            <span class="t_num t_num1"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--百度地图显示容器-->
            <div class="bmap-wrap">
                <div id="baidumap">
                
                </div>
                <!-- <div class="maptype1 " id="mapTypeBtn">
                    <div class="btn" go="maptype1"></div>
                    <div class="btn" go="maptype2"></div>
                </div> -->
                <div class="point-type">
                    <ul>
                        <li>
                            <i></i>
                            <p>语音画册</p>
                        </li>
                        <li>
                            <i></i>
                            <p>巡更人员</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--百度地图显示容器 end-->
        </div>
        
        <div class="rightcon">
            <!--    门票统计-->
            <div class="ticket">
                <div class="left">
                    <div class="total xiao"><span class="xiaoNum">8569</span> <span>张</span></div>
                </div>
                <div class="right">
                    <div class="total people"><span class="peopleNum">8569</span> <span>人</span></div>
                </div>
                <!-- <div class="chartcon" id="ticketDiv"></div> -->
<!--                <div class="legend">-->
<!--                    <script type="text/html" id="ticTpl">-->
<!--                        <li soda-repeat="item in data">-->
<!--                            <i></i> <span>{{item.name}}</span>-->
<!--                        </li>-->
<!--                    </script>-->
<!--                    <ul id="ticLegend">-->
<!--                    </ul>-->
<!--                </div>-->
            </div>
            <!--    门票统计  end -->
            <!--客流饱和度和停车场使用率-->
            <div class="saturation">
                <div class="box1 chartcon" id="passPerDiv"></div>
                <div class="box2 chartcon" id="parkDiv"></div>
            </div>
            <!--客流饱和度和停车场使用率 end-->
            <!--客源地游客统计 -->
            <div class="consumer">
                <div class="box box1">
                    <ul>
                        <li>
                            <div class="name"><i>1</i> <span>河南</span> <strong>20</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>2</i> <span>山东</span> <strong>1</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>3</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>4</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>5</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                    </ul>
                </div>
                <div class="box box2">
                    <ul>
                        <li>
                            <div class="name"><i>6</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>7</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>8</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>9</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                        <li>
                            <div class="name"><i>10</i> <span>&nbsp;</span> <strong>0</strong></div>
                            <div class="vol"><span></span></div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--客源地游客统计 end-->
            <!--景区驻留时长 -->
            <div class="reside">
                <div class="chartcon" id="residentDiv">
                
                </div>
            </div>
            <!--景区驻留时长 end-->
        </div>
        <div class="clearfloat"></div>
    </div>
</div>

<!--<script src="./js/home_map.js"></script>-->
<script src="./lib/digitalScroll.js"></script>
<script src="./js/home_echart.js"></script>
<!-- <script src="data/home_echart.json?callback=list"></script> -->

<script>
  // 滚动数字
  // var sum = 75246;
  var sum = 246;

  function show_num1(n) {
    sum++;
    var it = $(".t_num1 i");
    var len = String(n).length;
    if (it.length > len) {
      var long = it.length - (it.length - len) - 1;
      $(".t_num1 i:gt(" + (long) + ")").remove();
      console.log('多一位')
    }
    for (var i = 0; i < len; i++) {
      if (it.length <= i) {
        $(".t_num1").append("<i></i>");
      }
      var num = String(n).charAt(i);
      //根据数字图片的高度设置相应的值
      var y = -parseInt(num) * 70;
      var obj = $(".t_num1 i").eq(i);
      obj.animate({
        backgroundPosition: '(0 ' + String(y) + 'px)'
      }, 'slow', 'swing', function () {
      });
    }
    $("#total .dn").show();
    $("#cur_num").val(n);
  }
  
  $(function () {
    $(".time-btn").on("click", function () {
      $(".hudong").toggleClass('timeshow')
    })
  })
  show_num1(sum)
//地图

  var mapRoot = {}; // 地图的根对象
  var tileLayer = new BMap.TileLayer();
  tileLayer.getTilesUrl = function (tileCoord, zoom) {
      var x = tileCoord.x;
      var y = tileCoord.y;
      return './image/tile-' + x + '_' + y + '.png';
  }
  var Qmap = new BMap.MapType('Qmap', tileLayer, {minZoom: 14, maxZoom: 16});
  var homeMap = new BMap.Map('baidumap', {mapType: Qmap, enableMapClick: false});
  //homeMap.addControl(new BMap.NavigationControl());
  homeMap.centerAndZoom(new BMap.Point(113.576584,35.604839), 14);
  // homeMap.centerAndZoom(new BMap.Point(113.573269,35.603467), 14);
  homeMap.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  homeMap.disableInertialDragging(); // 禁用地图惯性拖拽
  homeMap.disableDoubleClickZoom(); // 禁用双击放大
  // homeMap.disableDragging(); // 禁止拖拽地图
  homeMap.addEventListener("zoomend", function(e){
      // 获取当前级别
      var ZoomNum = homeMap.getZoom();
      if (ZoomNum>14) {
          removeMarkerAll.call(mapRoot.landMarkObj);
          mapRoot.landAdd();
      }else{
          removeMarkerAll.call(mapRoot.landMarkObj);
          mapRoot.landAddData();
      }

  });
  //GPS坐标校准工具函数
  function transA(coor) {
      var nc = coor - 0.000001;
      return nc
  }
  function transB(coor) {
      var nc = coor + 0.000001;
      return nc
  }
  function newBp(c1, c2) {
      return new BMap.Point(transA(c1), transB(c2))
  }
  function removeMarkerAll() {
      for(x in this){
          if (!this[x].remove) return;
          this[x].remove();
      }
  }
  // removeMarkerAll.call(markerPool.flashList)
  // 测试坐标准确性
  //  var point = newBp(113.578282,35.603687);
  //  var marker = new BMap.Marker(point);  // 创建标注
  //  homeMap.addOverlay(marker);               // 将标注添加到地图中
  //  marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

  // 坐标测试数据
  /* 点位坐标*/
  var markCoor = {}
  /*常态化显示的基础地标*/
  markCoor.landMarkData = [
      {id: 'jichu0', name: '八里沟欢迎词', coor: '113.6294140000,35.5509870000',point_type: "1"},
      {id: 'jichu1', name: '绝壁天梯', coor: '113.54116179953,35.58937715608',point_type: "1"},
      {id: 'jichu2', name: '蘑菇石', coor: '113.52980721789,35.587704069894',point_type: "1"},
      {id: 'jichu3', name: '黑龙潭', coor: '113.52698653858,35.586500600124',point_type: "1"},
      {id: 'jichu4', name: '马武居', coor: '113.56922486366,35.604051838693',point_type: "1"},
      {id: 'jichu5', name: '红石河', coor: '113.5374890000,35.5910510000',point_type: "1"},
      {id: 'jichu6', name: '天河瀑布', coor: '113.5394650000,35.5912790000',point_type: "1"},
      {id: 'jichu7', name: '仙人迎客峰', coor: '113.5707620000,35.6047080000',point_type: "1"},
      {id: 'jichu8', name: '一线天', coor: '113.5456270000,35.5959530000',point_type: "1"},
      {id: 'jichu9', name: '玉皇宫', coor: '113.5553730000,35.6026820000',point_type: "1"},
      {id: 'jichu10', name: '丹凤台', coor: '113.59762928389,35.608380351512',point_type: "1"},
      {id: 'jichu11', name: '归真台', coor: '113.60916352664,35.60588598314',point_type: "1"},
      {id: 'jichu12', name: '清峰关', coor: '113.61083749165293,35.61584854428335',point_type: "1"},
      {id: 'jichu13', name: '老君庵', coor: '113.60498,35.610127',point_type: "1"},
      {id: 'jichu14', name: '戏龙台', coor: '113.59626385951,35.611329474063',point_type: "1"},
      {id: 'jichu15', name: '回龙挂壁', coor: '113.62208406878308,35.60563719338466',point_type: "1"},
      {id: 'jichu16', name: '老爷顶', coor: '113.60165369257,35.613808999679',point_type: "1"},
      {id: 'jichu17', name: '如画台', coor: '113.59371267187,35.615261466831',point_type: "1"},
      {id: 'jichu18', name: '闻琴台', coor: '113.59935403047,35.618092967699',point_type: "1"},
      {id: 'jichu19', name: '天梯', coor: '113.561564,35.650564',point_type: "1"},
      {id: 'jichu20', name: '西莲寺', coor: '113.560918,35.651855',point_type: "1"},
      {id: 'jichu21', name: '九莲潭', coor: '113.56013401191,35.649174039876',point_type: "1"}
  ]
  // 创建地标maker
  mapRoot.landMarkObj = {};// 所有地标
  function landMarker(point, text) {
      // console.log(point)
      // console.log(text)
      this._point = point;
      this._text = text;
  }
  landMarker.prototype = new BMap.Overlay(); // 覆盖物的抽象基类
  landMarker.prototype.initialize = function (map) {
      this._map = map;
      var div = this._div = document.createElement("div");
      div.classList.add('land');
      div.style.position = "absolute";
      div.innerHTML = this._text;
      homeMap.getPanes().labelPane.appendChild(div);
      return div;
  }
  landMarker.prototype.draw = function () {
      var map = this._map;
      // 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x + "px";
      this._div.style.top = pixel.y + "px";
  }
  mapRoot.landAddData = function (Ptype) {
      // removeMarkerAll.call(mapRoot.landMarkObj)
      console.log(markCoor.landMarkData);
      for (x in markCoor.landMarkData){
          var val= markCoor.landMarkData[x];
          // if (val.point_type == Ptype) {
          console.log(val.point_type)
          if (val.point_type) {
              mapRoot.landMarkObj[val.id] = new landMarker(new BMap.Point(val.coor.split(',')[0], val.coor.split(',')[1]), val.name);
              // addOverlay 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
              homeMap.addOverlay(mapRoot.landMarkObj[val.id]);
          }
      }
  }
  mapRoot.landAddData();
  // 批量添加基础 地标
  mapRoot.landAdd = function (Ptype) {
      // removeMarkerAll.call(mapRoot.landMarkObj)
      console.log(markCoor.landMark);
      for (x in markCoor.landMark){
          var val= markCoor.landMark[x];
          // if (val.point_type == Ptype) {
          console.log(val.point_type)
          if (val.point_type) {
              mapRoot.landMarkObj[val.id] = new landMarker(new BMap.Point(val.coor.split(',')[0], val.coor.split(',')[1]), val.name);
              // addOverlay 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
              homeMap.addOverlay(mapRoot.landMarkObj[val.id]);
          }
      }
  }
  // mapRoot.landAdd();
  // 景点与演出类型的切换
  $("#mapTypeBtn .btn").on("click",function () {
      var go=$(this).attr('go');
      $("#mapTypeBtn").attr('class',go);
      if(go=='maptype1'){
          mapRoot.landAdd(2);
      }else {
          mapRoot.landAdd(1);
      }
  })


  // 获取基础坐标数据
  loadData({
      type: 'get',
      url: '/bigdata/manage/map/get-point',
      interval: 0,
      callback: function (res) {
          console.log('基础点位数据', res)

          markCoor.landMark = [];
          res.result.forEach(function (val, index) {
              var obj = {};
              obj.id = 'jichu' + index;
              obj.name = val.name;
              obj.coor = val.coord;
              obj.point_type=val.point_type;
              markCoor.landMark.push(obj)
          })
          res=null;
          // mapRoot.landAdd(2);// 添加基础地标
      }
  })





  // 彩色会闪动的marker
  mapRoot.coMarkObj = {};// 所有彩色点的映射
  function coMarker(point, bg, name) {
      this._point = point;
      this._bg = bg;
      this._name = name;
  }
  coMarker.prototype = new BMap.Overlay();
  coMarker.prototype.initialize = function (map) {
      this._map = map;
      var div = this._div = document.createElement("div");
      div.classList.add('comark');
      div.setAttribute('names', this._name);
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

      var span = document.createElement('span');
      span.style.backgroundColor = this._bg;
      div.appendChild(span);
      var em = document.createElement('em');
      em.style.backgroundColor = this._bg;
      div.appendChild(em);
      var strong = document.createElement('strong');
      strong.style.borderColor = this._bg;
      div.appendChild(strong);
      // 返回地图覆盖物容器列表
      homeMap.getPanes().labelPane.appendChild(div);
      return div;

  }
  // 抽象方法，当地图状态发生变化时，由系统调用对覆盖物进行绘制。自定义覆盖物需要实现此方法
  coMarker.prototype.draw = function () {
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      if(!this._div) return
      this._div.style.left = pixel.x + "px";
      this._div.style.top = pixel.y + "px";
  }
  coMarker();

  //  简单图标类型的marker
  function iconMarker(point, imgURL,w,h) {
      this._point = point;
      this._imgURL = imgURL;
      this._w=15;
      this._h=h||15;
  }
  iconMarker.prototype = new BMap.Overlay();
  iconMarker.prototype.initialize = function (map) {
      this._map = map;
      var div = this._div = document.createElement("div");
      div.classList.add('iconMarkerDiv');
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
      var marginPX= -(this._w)/2;
      div.style.marginLeft = marginPX+'px'
      div.style.marginTop = marginPX + 'px';

      var img = document.createElement('img');
      img.src=this._imgURL;
      img.width= this._w;
      img.height= this._h;
      div.appendChild(img);

      homeMap.getPanes().labelPane.appendChild(div);
      return div;
  }
  iconMarker.prototype.draw = function () {
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x + "px";
      this._div.style.top = pixel.y + "px";
  }



  //  轮询闪烁点位
  loadData({
      type: 'get',
      url: '/bigdata/manage/voice/get-flash-point',
      interval: 3000,
      callback: function (res) {
          var data=JSON.parse(JSON.stringify(res.result))
          if (res.result.list.length == 0) {

          }else{
              flash_marker_render(data)
          }
          res=null;
      }
  })

  var markerPool = {};  //动态点位对象池
  function flash_marker_render(para){
      removeMarkerAll.call(markerPool.boatList);// 先清除上次显示的所有闪烁点位
      removeMarkerAll.call(markerPool.patrolList);// 先清除上次显示的所有闪烁点位
      removeMarkerAll.call(markerPool.flashList);// 先清除上次显示的所有闪烁点位
      markerPool.boatList = []; // 游船
      markerPool.patrolList = []; // 巡更人员
      markerPool.flashList = [];// 闪烁点


      /*para.night_patrol_list.forEach(function (val, index) {
          var pt = new BMap.Point(val.coord.split(',')[0], val.coord.split(',')[1]);
          var imgURL = 'http://static-1251225286.cossh.myqcloud.com/qingdata/xungeng.png'
          markerPool.patrolList[index] = new iconMarker(pt, imgURL);
          homeMap.addOverlay(markerPool.patrolList[index]);
      })*/


      //  其他类型点位
      var colorList={
          gcspa: '#0c7fd8',
          wywzx: '#da1b24',
          yyhc: '#fbed47',
          xgry: '#7a53fc',
      }
      para.list.forEach(function (val,index) {
          var color=colorList[val.type]
          markerPool.flashList[index]= new coMarker(new BMap.Point(val.coord.split(',')[0], val.coord.split(',')[1]), color, val.name+index);
          homeMap.addOverlay(markerPool.flashList[index]);
      })
  }





</script>
</body>

</html>
